<template>
  <div class="flow-panel">
    <a-tabs v-model:activeKey="activeKey" centered>
      <a-tab-pane key="1" tab="节点属性">
        <PropertyConfig
          :formCards="formCards"
          :flowNodes="flowNodes"
          :card="curNode"
          :controls="getControl('1')"
          @updateValue="updateValue"
        />
        <a-tabs v-if="isShowSubTab" type="card" centered>
          <a-tab-pane key="base" tab="基础设置">
            <PropertyConfig
              :formCards="formCards"
              :flowNodes="flowNodes"
              :card="curNode"
              :controls="getControl('2')"
            />
          </a-tab-pane>
          <a-tab-pane key="high" tab="高级设置" force-render>
            <PropertyConfig
              :formCards="formCards"
              :flowNodes="flowNodes"
              :card="curNode"
              :controls="getControl('3')"
            />
          </a-tab-pane>
        </a-tabs>
        <div class="node-empty" v-if="!curNodeId">
          <img class="img" :src="nodeEmpty" alt="node-empty" />
          <span class="text">请先选中节点</span>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="流程属性" force-render>
        <PropertyConfig
          :formCards="formCards"
          :flowNodes="flowNodes"
          :card="curNode"
          :controls="flowProperty"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watchEffect } from 'vue';
import { useStore } from 'vuex';
import eventBus from '@/core/eventBus';
import { GetAllCard } from '@/global/util/common';
import PropertyConfig from '@/engine/components/PropertyConfig.vue';
import nodeEmpty from '@/assets/imgs/flow/node-empty.svg';

export default defineComponent({
  name: 'FlowPanel',
  components: {
    PropertyConfig,
  },
  setup() {
    const activeKey = ref('1');
    const store = useStore();
    const curNodeId = computed(() => store.state.flowDesign.curNodeId);
    const curNode = computed(() => store.getters['flowDesign/curNode']);
    const flowNodes = computed(() => store.state.flowDesign.nodes);
    const controls: any = computed(() => curNode.value?.properties ?? {});
    const flowProperty = computed(() => store.state.flowDesign.flowProperty);
    const formCards = computed(() => {
      const cards = GetAllCard(store.state.flowDesign.form.formCards ?? []);
      return cards.filter((it) => it.group !== 'layout');
    });
    watchEffect(() => {
      if (!curNodeId.value) {
        activeKey.value = '2';
      } else {
        activeKey.value = '1';
      }
    });
    const getControl = (type: string) => {
      const temp = (keys: string[]) => {
        const obj = {};
        keys.forEach((key) => {
          if (controls.value[key]) {
            Object.assign(obj, { [key]: controls.value[key] });
          }
        });
        return obj;
      };
      switch (type) {
        case '1':
          return temp(['nodeId', 'nodeName']);
        case '2':
          return temp(['actionHandler', 'actionAuth']);
        case '3':
          return temp([
            'actionBtn',
            'actionOrder',
            'turnRule',
            'handlerEmpty',
            'messageNotice',
            'handlerTime',
          ]);
        default:
          return controls;
      }
    };
    const isShowSubTab = computed(() => {
      return (
        curNodeId.value &&
        (Object.keys(getControl('2')).length ||
          Object.keys(getControl('3')).length)
      );
    });
    const updateValue = (val: any, key: string) => {
      if (key === 'nodeName') {
        const id = controls.value.nodeId?.defaultValue;
        eventBus.emit('node-property-change', { id, key, val });
      }
    };

    return {
      nodeEmpty,
      activeKey,
      curNodeId,
      curNode,
      flowNodes,
      controls,
      flowProperty,
      formCards,
      getControl,
      isShowSubTab,
      updateValue,
    };
  },
});
</script>

<style lang="less" scoped>
.flow-panel {
  width: 300px;
  background-color: @rb-body-background;
  .node-empty {
    .flexColumn();
    margin-top: 100px;
    .img {
      width: 50%;
    }
    .text {
      color: @rb-label-color;
    }
  }
}
</style>
